<template>
  <div class="container row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 category">
      <div class="category_tag">
        <div class="label_head">
          <h2>分类、标签</h2>
        </div>
        <div class="data_items">
            <div @click="searchBlogByCategory(item.categoryName)" class="data_item" v-for="(item,index) in categoryItems">{{item.categoryName}}</div>
        </div>
        <div class="data_items">
          <div @click="searchBlogByTag(item.tagName)" class="data_item" v-for="(item,index) in tagItems">{{item.tagName}}</div>
        </div>
      </div>
      <Loading v-if="isloading"/>
      <search-list v-if="dataList.length!=0" :data-list="dataList" :search-name="searchName"></search-list>
    </div>
  </div>
</template>
<script>
import {request} from "../../../axios";
import SearchList from "./SearchList";
import ContentFooter from "../../common/LimitControl";
import Loading from "../message/Loading";
export default {
  name: "Category",
  components:{
    SearchList,ContentFooter,Loading
  },
  data(){
    return {
      categoryItems:[],
      tagItems:[],
      dataList:[],
      searchName:'',
      isloading:true,
    }
  },
  methods:{
    searchBlogByCategory(categoryName){
      this.searchName = categoryName;
        this.isloading = true;
        request({
          url:`/backend/searchblogbycategory/${categoryName}`,
          method:'GET'
        }).then(res=>{
          this.isloading = false;
          this.dataList = res.data.dataList;
        })
    },
    searchBlogByTag(tagName){
      this.searchName = tagName;
      this.isloading = true;
      request({
        url:`/backend/searchblogbytag/${tagName}`,
        method:'GET'
      }).then(res=>{
        this.isloading = false;
        this.dataList = res.data.dataList;
      })
    }
  },
  mounted() {
    request({
      url:'/backend/getallcategory',
      method:'GET',
    }).then(res=>{
      this.categoryItems = res.data.categoryList
    });
    request({
      url:'/backend/getalltag',
      method:'GET',
    }).then(res=>{
      this.tagItems = res.data.tagList;
      this.isloading = false;
    });
  }
}
</script>

<style scoped>
.category{
  min-height: 100vh;
  background-color: rgba(249,249,249,.9);

}
.label_head{
  margin: 1rem 0;
  padding: 1rem;
  text-align: center;
  border-bottom: 3px solid #ffff00;
  box-shadow: 0 5px 5px #ffff00;
}
h2{
  color: #41a8a5;
  text-shadow: 0 0 5px #41a8a5;
}
.data_items{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 3px solid #ee9900;
  cursor: pointer;
}
.data_item{
  margin: 1rem;
  padding: .5rem .5rem;
  border-radius: .5rem;
  text-shadow: 0 0 5px #03e9f4;
  transition: all .5s linear;
}
.data_item:hover{
  transform: translateY(-5px);
  box-shadow: 0 0 10px #0077aa;
}
.data_items > div:nth-child(2n-1){
  background-color: #ee9900;
}
.data_items > div:nth-child(2n){
  background-color: yellow;
}





</style>